import { codeInspectorPlugin } from "code-inspector-plugin";
import AutoImport from "unplugin-auto-import/rspack";
import versionInjector from "unplugin-version-injector/webpack";
import { ElementUiResolver } from "unplugin-vue-components/resolvers";
import Components from "unplugin-vue-components/rspack";

import { defineConfig, loadEnv } from "@rsbuild/core";
import { pluginSass } from "@rsbuild/plugin-sass";
import { pluginVue2 } from "@rsbuild/plugin-vue2";

const { parsed, publicVars } = loadEnv({ prefixes: ["APP_"] });

const cipOPS = (isBuild = false) => ({
	bundler: "rspack",
	dev: isBuild ? false : true,
	hideConsole: true /* Win：Alt+Shift、Mac：Option+Shift */,
	hideDomPathAttr: true
});

const sassOPS = {
	sassLoaderOptions: {
		additionalData: `@import "@/assets/css/global.scss";`,
		implementation: require("sass"),
		sourceMap: true
	}
};

const uviOPS = {
	formatDate: time => new Date(time).toLocaleString(),
	log: true,
	name: "rsb_v2"
};

export const sourceMapOPS = (isBuild, isAccuracy = false) => {
	if (isAccuracy) {
		return {
			css: isBuild ? false : "inline",
			js: isBuild ? false : "inline-source-map"
		};
	} else {
		return {
			css: false,
			js: isBuild ? false : "cheap-module-source-map"
		};
	}
};

export default defineConfig(({ command }) => {
	const isBuild = command === "build";
	const devPlugins = isBuild ? [] : [codeInspectorPlugin(cipOPS(isBuild)), versionInjector(uviOPS)];

	return {
		dev: {
			cliShortcuts: false,
			lazyCompilation: false,
			liveReload: false,
			progressBar: true
		},
		html: {
			favicon: "./public/icon.svg",
			mountId: "app",
			title: parsed.APP_TITLE
		},
		output: {
			assetPrefix: "/",
			cleanDistPath: true,
			legalComments: "none",
			minify: isBuild,
			sourceMap: sourceMapOPS(isBuild, false)
		},
		performance: {
			buildCache: isBuild ? false : true,
			removeConsole: true
		},
		plugins: [pluginVue2(), pluginSass(sassOPS)],
		resolve: {
			alias: {
				"@": "./src"
			},
			dedupe: ["vue", "vue-router", "vuex", "lodash-es", "dayjs", "element-ui"]
		},
		server: {
			compress: isBuild,
			open: true,
			port: Number(parsed.APP_PORT)
		},
		source: {
			define: JSON.parse(JSON.stringify(publicVars)),
			entry: {
				index: "./src/main.js"
			},
			transformImport: [
				{
					customName: "lodash-es/{{ member }}",
					libraryName: "lodash-es"
				}
			]
		},
		tools: {
			rspack: {
				optimization: {
					runtimeChunk: "single"
				},
				output: {
					asyncChunks: false
				},
				plugins: [
					AutoImport({
						dirs: ["src/components", "src/views"],
						dts: false,
						eslintrc: {
							enabled: false
						},
						imports: ["vue", "vue-router", "vuex"],
						include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
						vueTemplate: true
					}),
					Components({
						directoryAsNamespace: false,
						dts: false,
						include: [/\.vue$/, /\.vue\?vue/],
						resolvers: [ElementUiResolver({ importStyle: "sass" })]
					}),
					...devPlugins
				],
				stats: {
					colors: true,
					warnings: false
				}
			}
		}
	};
});
